function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        //步长值写到定时器里面
        let step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            //回调函数写到定时器结束里面
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30)
}

(function () {
    let cloud = document.querySelector('.cloud');
    let tabs = document.querySelectorAll('.component-tab');
    let current = 0;
    for (let i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('mouseenter', function () {
            animate(cloud, this.offsetLeft);
        })
        tabs[i].addEventListener('mouseleave', function () {
            animate(cloud, current);
        })
        tabs[i].addEventListener('click', function () {
            current = this.offsetLeft;
        })
    }

    // 加载文章数据
    let page = 1, pagenum = 20, total = 0, loading = 0;
    getListData(page);
    const more = document.querySelector('.more');
    // 触底加载
    window.onscroll = function () {
        if (more.getBoundingClientRect().top - 100 <= window.innerHeight && loading === 0) {
            getListData(++page);
            loading = 1;
        }
    }
    let searchInput = document.querySelector('#search-input');
    console.log(searchInput);

    function getListData(page) {

        axios.get('/api/alist', { params: { page } })
            .then(res => {
                // console.log(res.data);

                //计算总的页数
                total = res.data.count / pagenum;
                //创建一个ul标签
                let ul = document.createElement('ul');
                ul.className = 'list';

                const artileArray = res.data.auser;
                let html = '';
                artileArray.forEach(a => {
                    // 获取当前时间
                    let d = new Date();
                    let newtimes = d.getTime();
                    let oldtimes = Date.parse(a.addtimes);
                    let goaltime = Math.floor((newtimes - oldtimes) / 1000 / 60 / 60 / 24);


                    // 获取文章内容
                    let imgReg1 = /<img.*?(?:>|\/>)/gi;
                    let contentStr = a.content.replace(imgReg1, '');
                    let text = contentStr.replace(/(\<img\/>|\<p>|\<\/p>|\<h>|\<\/h>|\<br>)/gi, function ($0, $1) {
                        return {
                            "<img/>": '',
                            "<p>": '',
                            "<h>": '',
                            "</p>": "",
                            "</h>": "",
                            "<br>": "",
                        }[$1];
                    });
                    // console.log(text);

                    //  获取图片
                    let imgreg = /src=[\'\"]?([^\'\"]*)[\'\"]?/gi;
                    let imgArr = a.content.match(imgreg);

                    html += `<li>
                                <div class="users">
                                    <div class="avatar-left">
                                        <a href="./mypage.html" class="avator-show">
                                            <img src="${a.avater}" alt="">
                                        </a>
                                        <div class="avatmol">
                                            <div class="bbox">
                                                <div class="bigavat">
                                                    <img src="${a.avater}" alt="">
                                                </div>
                                                <span>${a.username}</span>
                                                <div class="molrig">
                                                    <div class="support">
                                                        <span>${a.supports}</span>
                                                        <span>收到赞</span>
                                                    </div>
                                                    <div class="fan">
                                                        <span>${a.fans}</span>
                                                        <span>粉丝</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="icon">
                                                <div class="sign">
                                                    <span class="iconfont">&#xe670;</span>
                                                    <span>x2</span>
                                                    <span class="iconfont">&#xe688;</span>
                                                    <span>x2</span>
                                                </div>
                                                <div class="concern">关注Ta</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div href="./articledetails.html?aid=${a.aid}" class="avatar-right" data-id=${a.aid}>
                                        <div class="user-line">
                                            <p>${a.username}</p>
                                            <span>${goaltime}天前</span>
                                        </div>
                                        <div class="user-title">
                                            ${a.title}
                                        </div>
                                        <div class="user-text">
                                           ${text}
                                        </div>
                                        <div class="user-pic">
                                            <div><img ${imgArr[0]} alt="" class="list-pic"></div>
                                            <div><img ${imgArr[1]} alt="" class="list-pic"></div>
                                            <div><img ${imgArr[2]} alt="" class="list-pic"></div>
                                        </div>
                                        <div class="user-tag">
                                            <a href="#"><span class="tag">${a.tags}</span></a>
                                            <a href="#"><span class="tag"> </span></a>
                                            <a href="#"><span class="tag"></span></a>
                                            <a href="#"><span class="tag"></span></a>
                                        </div>
                                        <div class="user-toolbar">
                                            <div class="tool-l">
                                                <div>
                                                    <a href="javascript:;" class="tool-support"><i class="iconfont">&#xec7f;</i>${a.supports}</a>
                                                </div>
                                                <div>
                                                    <a href="./articledetails.html?aid=${a.aid}"><i class="iconfont">&#xe611;</i>${a.comments}评论</a>
                                                </div>
                                            </div>
                                            <div class="tool-r">
                                                <div class="share-btn">
                                                    <span><i class="iconfont">&#xe62a;</i>分享</span>
                                                </div>
                                                <div class="more-btn"><i class="iconfont">&#xe784;</i>
                                                <div class="more-t">举报该内容</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>`;
                });
                ul.innerHTML = html;
                document.querySelector('div.user-list').append(ul);
                loading = 0;

            })
            .catch(err => {
                console.error(err);
            })
    };

    // 获取当前时间
    // 时间戳格式化
    function formatDate(datetime) {
        var date = new Date(datetime)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var year = date.getFullYear()
        var month = ('0' + (date.getMonth() + 1)).slice(-2)
        var sdate = ('0' + date.getDate()).slice(-2)
        var hour = ('0' + date.getHours()).slice(-2)
        var minute = ('0' + date.getMinutes()).slice(-2)
        var second = ('0' + date.getSeconds()).slice(-2)
        // 拼接
        var result = year + '-' + month + '-' + sdate + ' ' + hour + ':' + minute + ':' + second
        // 返回
        return result;
    }

})();
